<template>
	<view class="content">
		<!--  手机顶部高度 -->
		<view :style="{height: systemBarHeight + 'px'}">
		</view>
		<view class="navbar">
			<uni-nav-bar @clickLeft="fh" :border="false" left-icon="left" title="文章详情" />
		</view>

		<view class="title">
			<text>什麼是人工智慧 (AI)？</text>
		</view>
		<view class="userinfo">
			<view class="userinfo_lf" @click="userinfo()">
				<view class="userinfo_lf1">
					<image src="/static/logo.png" mode=""></image>
				</view>
				<view class="userinfo_lf2">
					<text class="username">小暖知识谈</text>
					<text class="uploaddate">2025/01/10 13:99</text>
				</view>
			</view>
			<view class="userinfo_rg" v-if="adduser==false" @click="add()">
				<image src="/static/mine/gz.png" mode=""></image>
				<text>关注</text>
			</view>
			<view class="userinfo_rg1" v-if="adduser==true">
				<text>已关注</text>
			</view>
		</view>

		<view class="article">
			<view class="article_item">
				<text>这几天刷推很明显的感觉到英文技术社区对中国AI产业的进步速度处于一种半震动半懵逼的状态，应激来源主要是两个，一个是宇树（Unitree）的轮足式机器狗B2-W，另一个是开源MoE模型DeepSeek-V3。</text>
				<image :src="imagesrc" mode="" @click="imageup(imagesrc)"></image>
				<text>人工智慧 (AI) 是一套技術，可讓電腦執行各種進階功能，包括查看、理解及翻譯語音和文字語言、分析資料以及提供建議等。</text>
			</view>

			<view class="article_tip">
				<text>本文由小暖知识谈发布在xx平台，未经本人许可，禁止转载。</text>
			</view>
			<view class="browse">
				<text>188.3 万次浏览</text>
			</view>
		</view>

		<view class="tot">

		</view>
		<view class="comment">
			<view class="comment_tit">
				<view class="comment_tit_lf">
					<text>评论 (999）</text>
				</view>
				<view class="comment_tit_rg">
					<text>只看我的</text>
					<image src="/static/index/lookmi.png" mode="" v-if="lookme==false" @click="lookmine()"></image>
					<image src="/static/index/lookmi1.png" mode="" v-if="lookme==true" @click="lookmine()"></image>
				</view>
			</view>

			<view class="comment_list" v-for="(item,index) in commentlist" :key="index">
				<view class="comment_item">
					<view class="comment_item_t">
						<view class="comment_item_t_lf">
							<image src="/static/logo.png" mode=""></image>
						</view>
						<view class="comment_item_t_rg">
							<text class="comment_username">{{item.username}}</text>
							<text class="comment_meg">{{item.meg}}</text>
							<view class="comment_item_t_rg_b">
								<view class="comment_item_t_rg_b_lf">
									<text>2025/01/10</text>
								</view>
								<view class="comment_item_t_rg_b_rg">
									<image style="margin-right: 45rpx;" src="/static/index/hf.png" mode=""></image>
									<image src="/static/index/dianzan.png" mode=""></image>
									<text>99</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="reply_item" v-for="(vl,index) in item.reply" :key="index">
					<view class="reply_item_t">
						<view class="reply_item_t_lf">
							<image src="/static/logo.png" mode=""></image>
						</view>
						<view class="reply_item_t_rg">
							<view class="reply_username">
								<text>{{vl.replyusername}}</text>
								<view class="zuozhe" v-if="vl.identity==false">
									<text>作者</text>
								</view>
								<view class="huifu" v-if="vl.identity==true">
									回复 <text style="margin-left: 15rpx;">小暖知识谈</text>
								</view>
							</view>
							<view class="reply_meg">
								<text>{{vl.replymeg}}</text>
							</view>
							<view class="reply_item_t_rg_b">
								<view class="reply_item_t_rg_b_lf">
									<text>2025/01/10</text>
								</view>
								<view class="reply_item_t_rg_b_rg">
									<image style="margin-right: 45rpx;" src="/static/index/hf.png" mode=""></image>
									<image src="/static/index/dianzan.png" mode=""></image>
									<text>99</text>
								</view>
							</view>
						</view>

					</view>
				</view>

				<view class="zk_reply">
					<text>展看其他2条回复 ></text>
				</view>

			</view>
		</view>

		<view class="bottom">
			<view class="bottom_item">
				<view class="bottom_item_ipt">
					<image src="/static/index/pinglun1.png" mode=""></image>
					<input type="text" value="" placeholder="说说你的想法" />
				</view>
				<view class="bottom_item_rg">
					<view class="bottom_item_rg1">
						<image src="/static/index/shoucang.png" mode="" v-if="love==false" @click="lovechange()">
						</image>
						<image src="/static/index/shoucang1.png" mode="" v-if="love==true" @click="lovechange()">
						</image>
						<text>99</text>
					</view>
					<view class="bottom_item_rg2">
						<image src="/static/index/dianzan.png" mode="" v-if="give==false" @click="givechange()"></image>
						<image src="/static/index/dianzan3.png" mode="" v-if="give==true" @click="givechange()"></image>
						<text>99</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				systemBarHeight: 0,
				imagesrc: '/static/logo.png',
				adduser: false,
				lookme: false,
				give: false,
				love: false,
				commentlist: [{
						username: '海辛Hyacinth',
						meg: '雪中稚内的蓝调雪中稚内的蓝调时刻雪中稚内的蓝调时刻时刻',
						reply: [{
								replyusername: '小暖知识谈',
								replymeg: '文案文案本来就高',
								identity: false
							},
							{
								replyusername: '小暖知识谈',
								replymeg: '文案文案本来就高',
								identity: true
							}
						]
					},
					{
						username: '海辛Hyacinth',
						meg: '「软件，正在成为内容」—— Dan Shipper',
						reply: [{
								replyusername: '小暖知识谈',
								replymeg: '文案文案本来就高',
								identity: false
							},
							{
								replyusername: '小暖知识谈',
								replymeg: '文案文案本来就高',
								identity: false
							}
						]
					}
				]
			}
		},
		mounted() {
			this.getSysteminfo()
		},
		methods: {
			/* 手机顶部高度 */
			getSysteminfo() {
				uni.getSystemInfo({
					success: res => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			},
			/*关注  */
			add() {
				this.adduser = !this.adduser
			},
			lookmine() {
				this.lookme = !this.lookme
			},
			/* 返回 */
			fh() {
				uni.navigateBack({
					delta: 1 // 返回的页面层级，1表示返回上一页
				});
			},
			/* 收藏 */
			lovechange() {
				this.love = !this.love
			},
			/* 点赞 */
			givechange() {
				this.give = !this.give
			},
			userinfo() {
				uni.navigateTo({
					url: '/pages/index/user_Details'
				})
			},
			imageup(imagesrc) {
				let that = this
				let imgsArray = [];
				imgsArray[0] = imagesrc;
				console.log(imgsArray)
				uni.previewImage({
					current: 0,
					urls: imgsArray,
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 180rpx;
	}

	.title {
		width: 91%;
		margin: auto;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 53rpx;
		color: #152034;

	}

	.userinfo {
		width: 91%;
		margin: 30rpx auto 0;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.userinfo_lf {
			display: flex;
			align-items: center;

			.userinfo_lf1 {
				>image {
					width: 69rpx;
					height: 69rpx;
					border-radius: 34.5rpx;
				}
			}

			.userinfo_lf2 {
				display: flex;
				flex-direction: column;
				margin-left: 13rpx;

				.username {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 31rpx;
					color: #152034;
				}

				.uploaddate {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 23rpx;
					color: #7D8CA4;
					margin-top: 3rpx;
				}
			}
		}

		.userinfo_rg {
			width: 153rpx;
			height: 69rpx;
			background: #1677FF;
			border-radius: 42rpx 42rpx 42rpx 42rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 27rpx;
			color: #FFFFFF;

			>image {
				width: 34.35rpx;
				height: 34.35rpx;
			}
		}

		.userinfo_rg1 {
			width: 153rpx;
			height: 69rpx;
			background: #FFFFFF;
			border-radius: 42rpx 42rpx 42rpx 42rpx;
			border: 1rpx solid #7D8CA4;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 27rpx;
			color: #7D8CA4;
			display: flex;
			justify-content: center;
			align-items: center;
		}

	}

	.article {
		padding-bottom: 30rpx;

		.article_item {
			width: 91%;
			margin: 30rpx auto 0;

			>text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 31rpx;
				color: #152034;

			}

			>image {
				width: 689rpx;
				height: 382rpx;
				border-radius: 15rpx 15rpx 15rpx 15rpx;
				margin-top: 15rpx;
				margin-bottom: 15rpx;
			}
		}

		.article_tip {
			width: 91%;

			margin: 30rpx auto 0;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 19rpx;
			color: #7D8CA4;
		}

		.browse {
			width: 91%;
			margin: 15rpx auto 0;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 23rpx;
			color: #7D8CA4;
		}
	}

	.tot {
		width: 750rpx;
		height: 15rpx;
		background: #F4F6F9;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.comment {
		.comment_tit {
			width: 91%;
			height: 46rpx;
			margin: auto;
			padding-top: 30rpx;
			display: flex;
			padding-bottom: 30rpx;
			justify-content: space-between;

			.comment_tit_lf {
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 34rpx;
				color: #152034;
				height: 45.8rpx;
			}

			.comment_tit_rg {
				display: flex;
				align-items: center;
				height: 45.8rpx;

				>image {
					width: 45.8rpx;
					height: 45.8rpx;
				}

				>text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 31rpx;
					color: #7D8CA4;
					height: 45.8rpx;
					margin-right: 15rpx;
				}
			}
		}

		.comment_list {
			width: 91%;
			margin: 0 auto 30rpx;

			.comment_item {

				.comment_item_t {
					display: flex;
					align-items: center;
					width: 100%;

					.comment_item_t_lf {
						>image {
							width: 65rpx;
							height: 65rpx;
							border-radius: 32.5rpx;
						}
					}

					.comment_item_t_rg {
						display: flex;
						flex-direction: column;
						margin-left: 10rpx;
						width: 100%;

						.comment_username {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 27rpx;
							color: #152034;
						}

						.comment_meg {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 27rpx;
							color: #152034;
							margin-top: 7rpx;
						}

						.comment_item_t_rg_b {
							margin-top: 15rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.comment_item_t_rg_b_lf {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 23rpx;
								color: #7D8CA4;
							}

							.comment_item_t_rg_b_rg {
								display: flex;
								align-items: center;
								margin-left: auto;

								>image {
									width: 30.53rpx;
									height: 30.53rpx;
								}

								>text {
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									font-size: 23rpx;
									color: #7D8CA4;
									height: 30.53rpx;
									margin-left: 7rpx;
								}
							}
						}
					}
				}

			}

			.reply_item {
				display: flex;
				margin-left: auto;
				width: 85%;
				margin-top: 28rpx;

				.reply_item_t {
					display: flex;
					align-items: center;
					width: 100%;

					.reply_item_t_lf {
						>image {
							width: 65rpx;
							height: 65rpx;
							border-radius: 32.5rpx;
						}
					}

					.reply_item_t_rg {
						display: flex;
						flex-direction: column;
						margin-left: 10rpx;
						width: 100%;

						.reply_username {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 27rpx;
							color: #152034;
							display: flex;

							.zuozhe {
								width: 69rpx;
								height: 32rpx;
								background: #FFFFFF;
								border-radius: 8rpx 8rpx 8rpx 8rpx;
								border: 1rpx solid #7D8CA4;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 23rpx;
								color: #7D8CA4;
								display: flex;
								justify-content: center;
								align-items: center;
								margin-left: 15rpx;
							}

							.huifu {
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 27rpx;
								color: #7D8CA4;
								margin-left: 15rpx;

								>text {
									font-family: PingFang SC, PingFang SC;
									font-weight: 500;
									font-size: 27rpx;
									color: #152034;
								}
							}
						}

						.reply_meg {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 27rpx;
							color: #152034;
							margin-top: 7rpx;
						}

						.reply_item_t_rg_b {
							margin-top: 15rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							width: 100%;

							.reply_item_t_rg_b_lf {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 23rpx;
								color: #7D8CA4;
							}

							.reply_item_t_rg_b_rg {
								display: flex;
								align-items: center;
								margin-left: auto;

								>image {
									width: 30.53rpx;
									height: 30.53rpx;
								}

								>text {
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									font-size: 23rpx;
									color: #7D8CA4;
									height: 30.53rpx;
									margin-left: 7rpx;
								}
							}
						}
					}
				}
			}

			.zk_reply {
				width: 85%;
				margin-left: 30%;
				width: 258rpx;
				height: 63rpx;
				background: #F8F8FA;
				border-radius: 57rpx 57rpx 57rpx 57rpx;
				margin-top: 30rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 23rpx;
				color: #45516B;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.bottom {
		width: 750rpx;
		height: 153rpx;
		background: #FEFEFE;
		box-shadow: 6rpx -10rpx 29rpx 0rpx rgba(0, 0, 0, 0.06);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;

		.bottom_item {
			padding-top: 15rpx;
			display: flex;
			align-items: center;
			width: 91%;
			margin: auto;
			justify-content: space-between;

			.bottom_item_ipt {
				width: 466rpx;
				height: 69rpx;
				background: #F8F8FA;
				border-radius: 57rpx 57rpx 57rpx 57rpx;
				display: flex;
				align-items: center;

				>image {
					width: 45.8rpx;
					height: 45.8rpx;
					margin-left: 28rpx;
				}

				>input {
					margin-left: 17rpx;
				}
			}

			.bottom_item_rg {
				display: flex;

				.bottom_item_rg1 {
					display: flex;
					align-items: center;
					margin-right: 45rpx;

					>image {
						width: 30.53rpx;
						height: 30.53rpx;
					}

					>text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 23rpx;
						color: #7D8CA4;
						height: 30.53rpx;
						margin-left: 7rpx;
					}
				}

				.bottom_item_rg2 {
					display: flex;
					align-items: center;

					>image {
						width: 30.53rpx;
						height: 30.53rpx;
					}

					>text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 23rpx;
						color: #7D8CA4;
						height: 30.53rpx;
						margin-left: 7rpx;
					}
				}
			}
		}
	}
</style>